<script lang="ts">
export default {
  name: 'Study5StuDemo3'
}
</script>

<template>
  <h2>侦听器</h2>
  <div class="note">
    <p>1. 接口约束类型，可以在写属性时有提示，可以解构需要的属性</p>
    <p>2. 异步函数返回Promise对象，async & await 接收</p>
    <p>3. debounce防抖接收三个参数：函数，延迟时间，选项（可选）</p>
  </div>

  <hr class="hr-style" />
  <div class="test">
    <input :disabled="isDisabled" v-model="question" type="text" placeholder="请输入问题" />
    <p>问题的结果：{{ answer }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { debounce } from 'lodash'
// 定义接口响应的类型
interface ResData {
  /**
   * 返回的数据
   */
  data: any
  /**
   * 响应的信息
   */
  msg: string
  /**
   * 接口状态码
   * @description 4000:失败  200：代表请求成功  5000:代表服务器挂了
   */
  code: number | string
}

// 模拟后端请求数据
function fetchDataDemo() {
  return new Promise<ResData>((resolve, reject) => {
    setTimeout(() => {
      resolve({
        data: '你的问题我现在还没有学会,请过两天再问问我,这几天我正在疯狂的吃数据!',
        msg: 'ok',
        code: 200
      })
    }, 2000)
  })
}

// 问题
const question = ref('')
// 问题的答案
const answer = ref('')
// 是否禁用
const isDisabled = ref(false)

watch(
  question,
  debounce(async (newVal, oldVal) => {
    console.log(newVal, 'newVal')
    console.log(oldVal, 'oldVal')
    // 启动 input 禁用
    isDisabled.value = true
    // 获取接口响应的数据，并把数据部分解构出来
    const { data } = await fetchDataDemo()
    answer.value = data
    // 取消 input 禁用
    isDisabled.value = false
  }, 500)
)
</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
